Gird布局

2020.9.6 星期日 18：42

Grid布局指南
前端基础知识（grid布局）

CSS Grid 网格布局教程
带你入门 CSS Grid 布局

相关术语

Grid Container,Grid Item,Grid Line,Grid Track,Grid Cell,Grid Area,

4.网格轨道（Grid Track）
两个相邻的网格线之间为网格轨道。你可以认为它们是网格的列或行，下面在第二个和第三个网格线之间的黄色部分为网格轨道。

Grid Container 的全部属性

display: grid,inline-grid

grid-template-columns
grid-template-rows

grid-template-areas
grid-template

grid-column-gap
grid-row-gap
grid-gap

justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

1. display: grid | inline-grid | subgrid;
   subgrid: 如果网格容器本身是网格项（嵌套网格容器），此属性用来继承其父网格容器的列、行大小。
   注：当元素设置了网格布局，column、float、clear、vertical-align属性无效。

2. grid-template-columns: … | … ;
   track-size: 轨道大小，可以使用css长度，百分比或用分数（用fr单位）。
   line-name: 网格线名字，你可以选择任何名字。

Grid Items 的全部属性

grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self